<template>
	<view>
		<view class="navbar" :style="{'background':background, 'height':navbarHeight + 'px'}">
			<view :style="{'height':capsuleHeight + 'px', 'top': capsuleTop + 'px' }" class="arrow-content">
				<view class="arrow" v-if="isShowArrow" @click="handleGoToBack"></view>
			</view>
			<view class="imgicn">
				<u--image shape="circle" :src="user.usericon" width="30px" height="30px">
					<template v-slot:loading>
						<u-loading-icon color="red"></u-loading-icon>
					</template>
				</u--image>
				<view class="nameandarea">
					<view>{{user.username}}</view>
					<view style="color: #c2c2c2;font-size: 10px;">{{user.area}}</view>
				</view>
			</view>
		</view>
		<view class="container" :style="{'margin-top':capsuleTop+capsuleHeight+5+'px'}">
			<swiper class="sw" :autoplay="true" :interval="2000" :circular="true" :indicator-dots="true">
				<swiper-item v-for="item,index in imgurlss" :key="index">
					<image style="height:auto;width: 100%;display: block;" mode="widthFix" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>

		<view><text>{{user.price}}</text></view>
		<view><text>{{user.username}}</text></view>
		<view>
			<!-- <image :src="user.icon" /> -->
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(option) {
			this.user = JSON.parse(decodeURIComponent(option.item))
			const App = getApp();
			this.capsuleTop = App.globalData.capsule.top,
				this.capsuleHeight = App.globalData.capsule.height,
				this.navbarHeight = (App.globalData.capsule.top - App.globalData.system.statusBarHeight) * 2 + App
				.globalData.capsule.height + App.globalData.system.statusBarHeight
		},
		props: {
			background: {
				type: String,
				default: 'linear-gradient(200deg, #ecf5ff, #fdf6ec);'
			},
			isShowArrow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				capsuleTop: '', //胶囊距离屏幕顶部的距离
				capsuleHeight: '', //胶囊高度
				navbarHeight: '', //导航栏高度
				imgurlss:[
					'http://119.29.2.163:9000/xiaomayi/Homepageimage/1225009.jpg',
					'http://119.29.2.163:9000/xiaomayi/Homepageimage/34225426.jpg',
					'http://119.29.2.163:9000/xiaomayi/Homepageimage/10000.jpg'
				],
				user: {
					name: '',
					icon: '',
					price: '',
					usericon: '',
					username: '',
					area:''
				}
			}
		},
		methods: {
			handleGoToBack() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.arrow {
		width: 20rpx;
		height: 20rpx;
		border: 5rpx solid black;
		border-right-color: transparent;
		border-bottom-color: transparent;
		transform: rotate(-45deg);
	}

	.navbar {
		display: flex;
		align-items: flex-end;
		width: 100%;
		/* 设置导航栏在顶部 */
		position: fixed;
		top: 0;
		z-index: 99;
	}

	.arrow-content {
		margin-left: 10px;
		margin-right: 5px;
		margin-bottom: 5px;
		z-index: 999;
		display: flex;
		align-items: center;
	}

	.se {
		width: 50px;
	}
	.imgicn{
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}
	.nameandarea{
		/* border: 1px solid red; */
		margin-left: 5px;
	}
	.container{
		/* display: flex;
		justify-content: center; */
		/* align-items:center; */
		display: flex;
		height: 1100rpx;
		width: 100%;
	}
	.sw{
		width: 100%;
		height: 100%;
	}
</style>